<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>原生转盘抽奖</title>
  <!-- https://www.bilibili.com/video/BV1Mt4y1Q7UD/?spm_id_from=333.337.search-card.all.click&vd_source=c78fd23f2edd9e3deea8f1267be4aaab -->
  <style>
    *,
    *::after,
    *::before {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      min-height: 100vh;
    }

    :root:focus-within {
      scroll-behavior: smooth;
    }

    body {
      min-height: inherit;
    }
  </style>
</head>

<body>
</body>
<script>
  "use strict"; {
    let list = [
      {
        name: "小米手机",
        img: "https://img14.360buyimg.com/imagetools/jfs/t1/104165/34/15186/96522/5e6f1435E46bc0cb0/d4e878a15bfd9362.png"
      },
      {
        name: "蓝牙耳机",
        img: "https://img13.360buyimg.com/imagetools/jfs/t1/91864/11/15108/139003/5e6f146dE1c7b511d/1ddc5aa6e502060a.jpg"
      },
      {
        name: "apple watch",
        img: "https://img11.360buyimg.com/imagetools/jfs/t1/105385/19/15140/111093/5e6f1506E48bd0dfb/829a98a8cdb4c27f.png"
      },
      {
        name: "迪士尼苹果",
        img: "https://img11.360buyimg.com/imagetools/jfs/t1/108308/11/8890/237603/5e6f157eE489cccf1/26e0437cfd93b9c8.png"
      },
      {
        name: "海鲜套餐",
        img: "https://img14.360buyimg.com/imagetools/jfs/t1/90507/38/15165/448364/5e6f15b4E5df0c718/4bd4c3d375eec312.png"
      },
      {
        name: "谢谢参与",
        img: "https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png"
      }
    ];

    let pointer = `https://img11.360buyimg.com/imagetools/jfs/t1/89512/11/15244/137408/5e6f15edEf57fa3ff/cb57747119b3bf89.png`

    // 商品的个数
    let len = list.length

    // 绘制轮盘
    let drawPanel = () => {
      const canvas = document.createElement("canvas")
      document.body.appendChild(canvas)
      const ctx = canvas.getContext("2d", { colorSpace: "display-p3" })

      /* let dpr = window.devicePixelRatio, w = canvas.clientWidth * dpr, h = canvas.clientHeight * dpr, x = w / 2, y = h / 2, r = (w > h ? h : w) / 2 - 8; */
      let dpr = window.devicePixelRatio, w = 300 * dpr, h = 300 * dpr, x = w / 2, y = h / 2, r = (w > h ? h : w) / 2 - 8;

      // 设置设备分辨率
      canvas.width = w
      canvas.height = h
      canvas.style = `border: 1px solid black`

      // 设置开始角度为-90
      ctx.lineWidth = 2 //设置线宽度
      ctx.strokeStyle = `#ff9800` //描边的颜色
      ctx.lineCap = `round`
      let startAngle = -90, angle = 360 / len

      // 交替地背景颜色
      let colors = ["#ffe795", "#fff7df"]
      for (let i = 0; i < len; i++) {
        // 开启新的路径
        ctx.beginPath()
        // 将起始位置到中心点(画布的宽度的一半)
        ctx.moveTo(x, y)
        // 绘制扇形
        ctx.arc(x, y, r, (angle * i) * Math.PI / 180, (angle * i + angle) * Math.PI / 180)
        // console.log((angle * i), (angle * i + angle))
        ctx.fillStyle = colors[i % 2]
        // 结束路径线
        ctx.closePath()
        // 描边路径
        ctx.stroke()
        // 填充
        ctx.fill()
      }
    }
    drawPanel()

    document.addEventListener("DOMContentLoaded", () => {

    })
  };
</script>

</html>